<template>
	<uni-popup ref="popup" type="bottom">
		<view class="content">
			<view class="hd">
				<text>请选择服务时间</text>
				<icon class="iconfont icon" @click="close()">&#xe733;</icon>
			</view>
			<view v-show="timeData.isAssistServer === '1'" class="tips">
				平台将会在您的服务时间内，自动给来源于您上传的文档的客户打招呼。若您在服务时间内未及时回复客户消息，平台有权禁止您使用本功能。
			</view>
			<view class="bd">
				<picker-view class="picker-view" @change="changeStartTime" :value="timeData.startValueIndex">
					<picker-view-column>
						<view class="item" v-for="(item, index) in timeData.hour" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
				<picker-view class="picker-view" @change="changeEndTime" :value="timeData.endValueIndex">
					<picker-view-column>
						<view class="item" v-for="(item, index) in timeData.hour" :key="index">{{ item }}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="ft"><button class="btn btn-sub" hover-class="btnClickStyle" @click="checkchangeTime">确定</button></view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { setSvcTime, startAutogreetings, isBindSubscribe } from '@/subpages/common/api/set.js';
import { showModal } from '@/common/hooks/useShow.js';

const popup = ref(null);
const emits = defineEmits(['timeLayerCallback']);
const timeData = reactive({
	isAssistServer: '',
	subData: {
		worktimestart: '',
		worktimeend: ''
	},
	hour: [],
	startValueIndex: [],
	endValueIndex: []
});

defineExpose({
	open,
	close
});

//时间数组
function hourData() {
	const min = ['00', '15', '30', '45'];
	for (let i = 8; i < 24; i++) {
		for (let j = 0; j < min.length; j++) {
			let houerItem = `${i}:${min[j]}`;
			timeData.hour.push(houerItem);
		}
	}
}
hourData();
function open(start, end, type) {
	timeData.isAssistServer = type;
	popup.value.open();
	//时间选择定位
	for (let i = 0; i < timeData.hour.length; i++) {
		if (start === timeData.hour[i]) {
			timeData.startValueIndex = [];
			timeData.startValueIndex.push(i);
		}
		if (end === timeData.hour[i]) {
			timeData.endValueIndex = [];
			timeData.endValueIndex.push(i);
		}
	}
	timeData.subData.worktimestart = start;
	timeData.subData.worktimeend = end;
}
function close() {
	popup.value.close();
}
//选择开始时间
function changeStartTime(e) {
	timeData.subData.worktimestart = timeData.hour[e.detail.value[0]];
}
//选择结束时间
function changeEndTime(e) {
	timeData.subData.worktimeend = timeData.hour[e.detail.value[0]];
}
//提交时间验证
function checkchangeTime() {
	let start = timeData.subData.worktimestart;
	let end = timeData.subData.worktimeend;
	let startIndex = start.indexOf(':');
	let endIndex = end.indexOf(':');
	let startH = start.substring(0, startIndex);
	let startM = start.substring(startIndex + 1, start.length);
	let endH = end.substring(0, endIndex);
	let endM = end.substring(endIndex + 1, end.length);

	if (parseInt(startH) === parseInt(endH)) {
		if (parseInt(startM) === parseInt(endM)) {
			toastLayer('开始时间结束时间不能相同');
		} else if (parseInt(startM) > parseInt(endM)) {
			toastLayer('开始时间不能大于结束时间');
		} else {
			svcTimeCallBack();
		}
	} else if (parseInt(startH) > parseInt(endH)) {
		toastLayer('开始时间不能大于结束时间');
	} else {
		svcTimeCallBack();
	}
}
function toastLayer(text) {
	uni.showToast({
		icon: 'none',
		title: text
	});
}
//商户开通回调传值
function svcTimeCallBack() {
	emits('timeLayerCallback', timeData.subData);
}
</script>

<style scoped lang="scss">
@import '@/common/css/base.scss';
.content {
	width: 100%;
	padding-bottom: 32rpx;
	border-radius: 16rpx;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	background-color: #fff;
	.hd {
		@include flex(center, space-between);
		padding: 38rpx 26rpx;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #ececec;
		.icon {
			font-size: 36rpx;
			color: #666;
		}
	}

	.tips {
		padding: 0rpx 26rpx 38rpx 26rpx;
		border-bottom: 1rpx solid #ddd;
		font-size: 24rpx;
		color: #999;
	}
	.bd {
		@include flex(center, space-between);
		.picker-view {
			width: 50%;
			height: 600rpx;
			margin-top: 20rpx;
		}
		.item {
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}
	.btn-sub {
		width: 695rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background: #e1835b;
		border-radius: 40rpx;
	}
}
</style>
